<template>
  <div class="dashboard-container">
    <h1 class="page-title">医院标签运营总览</h1>

    <!-- 标签概览 -->
    <Overview />

    <!-- 医院标签使用对比 -->
    <HospitalComparison />

    <!-- 标签详情 -->
    <TagAnalysis />


  </div>
</template>

<script>
import Overview from './Overview.vue'
import HospitalComparison from './HospitalComparison.vue'
import TagAnalysis from './TagAnalysis.vue'

export default {
  name: 'allView',  //医院标签运营总览
  components: {
    Overview,  // 标签概览
    HospitalComparison, // 医院标签使用对比
    TagAnalysis // 标签详情
  },
  data() {
    return {

    };
  },
  methods: {
   
  }
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f4f7fc;
  min-height: calc(100vh - 84px);
}

.page-title {
  font-size: 31px; // 原 28px → +3px
  font-weight: 600;
  color: #333333;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid #4a90e2;
}

.content-section {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px 20px 0 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dddddd;
}

.section-title {
  font-size: 23px; // 原 20px → +3px
  font-weight: 600;
  margin: 0;
  border-left: 4px solid #4a90e2;
  padding-left: 12px;
}

.tag-overview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.tag-type-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #dddddd;
}

.tag-type-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.tag-type-title {
  font-size: 21px; // 原 18px → +3px
  font-weight: 600;
}

.tag-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 15px; // 原 12px → +3px
  color: white;
}

.tag-badge.hospital {
  background-color: #4a90e2;
}

.tag-badge.personal {
  background-color: #50e3c2;
}

.tag-type-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.stat-item {
  text-align: center;
  padding: 12px;
  background: #f4f7fc;
  border-radius: 8px;
}

.stat-value {
  font-size: 27px; // 原 24px → +3px
  font-weight: 700;
  color: #4a90e2;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 17px; // 原 14px → +3px
  color: #888888;
}

.update-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #888888;
  font-size: 12px;
}

.update-frequency {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(74, 144, 226, 0.1);
  border-radius: 4px;
  white-space: nowrap;
  font-size: 16px; // 原 12px → +3px
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: #409eff;
    color: #ffffff;
    transform: scale(1.05);
  }
}

.update-frequency::before {
  content: "⟳";
  font-size: 17px;
}

.last-updated {
  font-size: 15px;
  white-space: nowrap;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #dddddd;
}

.page-info {
  color: #888888;
  font-size: 14px;
}

.page-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.el-button+.el-button {
  margin-left: 0;
}


.tooltip-icon {
  color: #4a90e2;
  cursor: help;
  margin-left: 4px;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltip-text {
  visibility: hidden;
  width: 200px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 4px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 15px; // 原 12px → +3px
  line-height: 1.4;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
  margin-bottom: 30px;
  // display: flex;
  // align-items: center;
  // justify-content: center;

  /* ====== 加大 el-pagination 分页组件内所有文字的字号 ====== */
  ::v-deep .el-pagination {
    font-size: 16px;
    /* 整体基础字号，影响整体布局（可选） */
  }

  /* 页码按钮（比如 1 2 3 4 5 ...） */
  ::v-deep .el-pagination .el-pager li {
    font-size: 16px !important;
    min-width: 32px; // 可选：让页码按钮稍宽一点，配合大字号更舒适
    height: 32px; // 可选：高度也稍大，按钮更协调
    line-height: 32px;
  }

  /* 上一页 / 下一页 按钮 */
  ::v-deep .el-pagination .btn-prev,
  ::v-deep .el-pagination .btn-next {
    font-size: 16px !important;
    min-width: 32px;
    height: 32px;
    line-height: 32px;
  }

  /* 总条数（比如：共 100 条） */
  ::v-deep .el-pagination .el-pagination__total {
    // display: flex;
    // align-items: center;
    font-size: 16px !important;
    line-height: 2.2;
  }

  /* 每页条数选择器（sizes）的文本和按钮 */
  ::v-deep .el-pagination .el-pagination__sizes {
    font-size: 16px !important;
  }

  ::v-deep .el-pagination .el-pagination__sizes .el-input .el-input__inner {
    font-size: 16px !important;
    height: 32px; // 可选：让输入框高度与大字号匹配
  }

  /* 跳转至输入框（比如：跳至 1 页） */
  ::v-deep .el-pagination .el-pagination__jump {
    font-size: 16px !important;
    line-height: 2.2;
  }

  ::v-deep .el-pagination .el-pagination__jump .el-input .el-input__inner {
    font-size: 16px !important;
    height: 32px;
  }

  /* 当前选中页码样式（可选美化） */
  ::v-deep .el-pagination .el-pager li.active {
    font-size: 16px !important;
    font-weight: 600; // 可选：加粗当前页
    color: #409eff; // Element 默认主题色，可保持或自定义
  }
}

/* ======================== 新增：表格内字体加大 3px ======================== */
/* 表头 th 字体 */
::v-deep .el-table .el-table__header th {
  font-size: 17px !important; // 原一般为 14px，+3px → 17px
  font-weight: 600;
  color: #303133;
}

/* 表格单元格 td 字体 */
::v-deep .el-table .el-table__body td {
  font-size: 17px !important; // 原一般为 14px，+3px → 17px
  color: #606266;
}

::v-deep .el-tabs__item {
  font-size: 18px !important;
  font-weight: 500;
}

::v-deep .el-tabs__item.is-active {
  font-size: 18px !important;
  font-weight: 600;
  color: #409eff;
}

.table-scroll-wrapper {
  width: 100%;
  overflow-x: auto;
  min-width: 1500px;
  flex-shrink: 0;

  .el-table {
    min-width: 1200px !important;
    table-layout: fixed !important;

    ::v-deep .el-table__header-wrapper,
    ::v-deep .el-table__body-wrapper {
      min-width: 1200px !important;
    }

    ::v-deep .el-table__header th,
    ::v-deep .el-table__body td {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  /* 可选美化滚动条 */
  &::-webkit-scrollbar {
    height: 8px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
  }
}

/* 过渡动画样式 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1.5s ease-in-out;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>